<template>
  <div class="box">
    <div class="header">任务执行状态</div>
    <div class="content_wrapper">
      <el-tabs type="border-card" style="height: 100%">
        <el-tab-pane label="执行中">
          <running-task />
        </el-tab-pane>
        <el-tab-pane label="待执行">
          <waiting-task />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="header footer">

    </div>
  </div>
</template>

<script>
import RunningTask from "@/views/task/RunningTask.vue";
import WaitingTask from "@/views/task/WaitingTask.vue";

export default {
  name: 'TaskView',
  components: {
    WaitingTask,
    RunningTask
  },
}
</script>
<style>
.box{
  position: absolute;
  width: 90%;
  max-width: 950px;
  height: 90%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border: 3px solid #97c5ea;
  border-radius: 20px;
  overflow: hidden;
}
.header{
  font-size: 20px;
  font-weight: bolder;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
  border-bottom: 2px solid #97c5ea;
}
.footer{
  border-top: 2px solid #97c5ea;
}
.content_wrapper{
  background-color: whitesmoke;
  height: calc(100% - 80px);
}
.content{
  height: 100%;
}
.running{
  margin-bottom: 30px;
}
.waiting{

}

</style>
